<script setup lang='ts'>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { router } from '@/router'
import { useScroll } from './hooks/useScroll'
import VuePdfApp from "vue3-pdf-app"
import "vue3-pdf-app/dist/icons/main.css"
import { encode } from 'gpt-tokenizer'
import { nanoid } from 'nanoid';


const { scrollRef, scrollToBottom } = useScroll()

// Conversation and PDF preview panel toggle control
let showTab = ref<string>("nav-tab-chat")
let tabWidth = ref<string>("")

// vue3-pdf-app UI configuration
let pdfFile = ref<string>("")
const config = ref<{}>({
  sidebar: true,
  toolbar: {
    toolbarViewerLeft: {
      findbar: true,
      previous: true,
      next: true,
      pageNumber: false,
    },
    toolbarViewerRight: {
      presentationMode: true,
      openFile: false,
      print: false,
      download: false,
      viewBookmark: false,
    },
    toolbarViewerMiddle: {
      zoomOut: true,
      zoomIn: true,
      scaleSelectContainer: true,
    }
  },
})

// Message input box
const prompt = ref<string>('')

const sessionId = ref<string>('')

// Loading state and button state
const buttonDisabled = ref<boolean>(false)

// Get uuid from URL params
const route = useRoute()
// let { uuid } = route.params as { uuid: string }

let  uuid  = 1

  interface Conversation {
  title: string;
  uuid: string;
  isEdit: boolean;
  createDate: string;
  lastChatContent: string;
  active: boolean;
}

interface Message {
  send: {
    model: string;
    messages: {
      role: string;
      content: string;
      fileName: any;
      fileSize: number;
    }[];
    temperature: number;
  };
  loading: boolean;
  receive?: {
    model: string;
    choices: {
      message?: {
        content: string;
      };
      delta: {
        content: string;
      };
    }[];
  };
}

// Conversation list and message list
var conversationList = ref<Conversation[]>([])
var messageList = ref<Message[]>([]);

let conversations = window.localStorage.getItem("chatStore")
if(conversations){
  conversationList.value = JSON.parse(conversations)
}

// Check if new conversation
if (!uuid || uuid === '0') {
  // Initialize empty conversation
  if(!conversations){
    conversationList.value.push({
      title: '新的会话',
      uuid: uuid,
      isEdit: false,
      createDate: new Date().toLocaleString(),
      lastChatContent: '由lucifer-ai提供',
      active: true
    })
  }else{
    // If has history, get last conversation
    let lastConversation = conversationList.value[conversationList.value.length-1]
    lastConversation === undefined ? uuid = nanoid() :  uuid = lastConversation.uuid


    let messages = window.localStorage.getItem(uuid)
    if(messages) {
      messageList.value = JSON.parse(messages)
    }
    //router.push({ name: 'AI', params: { uuid } })
  }
}else{
  // Load current conversation messages
  let messages = window.localStorage.getItem(uuid)
  if(messages) {
    messageList.value = JSON.parse(messages)
  }

  conversationList.value.forEach((item, index) => {
    if(item.uuid == uuid){
      item.active = true
    }else{
      item.active = false
    }
  })

  scrollToBottom()
}

// Set active conversation
function handleAdd() {
  // Reset the message record of the new conversation
  messageList.value = []
  // Reset the active status of the conversation list
  conversationList.value.forEach((item, index) => {
    item.active = false
  })

  // Initialize an empty conversation
  uuid = nanoid();

  conversationList.value.unshift({
    title: "新的会话",
    uuid: uuid,
    isEdit: false,
    createDate: new Date().toLocaleString(),
    lastChatContent: '由lucifer-ai提供',
    active: true
  })

  // Save the conversation to local storage
  window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
}

// Menu toggle
function handleMenu(){
  let rootbody = document.getElementById("rootbody")
  if (rootbody) {
    if(rootbody.classList.value==""){
      rootbody.classList.value="open-sidebar-menu"
    }else{
      rootbody.classList.value=""
    }
  }
}

// Switch conversation
function handleSwitch(selectedUuid: string) {
  uuid = selectedUuid

  // Reset message record of the new conversation
  let messages = window.localStorage.getItem(selectedUuid)
  if(messages){
    messageList.value = JSON.parse(messages)
  }else{
    messageList.value = []
  }

  // Reset active status of the conversation list
  conversationList.value.forEach((item, index) => {
    if(item.uuid == selectedUuid){
      item.active = true
    }else{
      item.active = false
    }
  })

 // router.push({ name: 'AI', params: { uuid } })
}

// File upload related
var fileName = ref()
var fileSize = ref<number>(0)
var formattedFileSize = ref<string>('0B')
var fileUploadCard = ref<boolean>(false)

var fileContent = ref()


// Handle file upload
function handleUpload(e: Event) {
  const target = e.target as HTMLInputElement;
  if(target.files && target.files[0].size >= 5 * 1024 * 1024){
    alert('Maximum file size limit is 5MB')
    return
  }else if (!target.files || target.files.length === 0) {
    alert('请选择文件')
    return
  }

  // Set file upload style
  fileName.value = target.files[0].name
  fileSize.value = target.files[0].size
  formatFileSize()

  // Preview PDF
  showTab.value = 'nav-tab-doc'
  tabWidth.value = 'width: 60%'

  pdfFile.value = URL.createObjectURL(target.files[0])

  // Upload file and extract content
  const formData = new FormData()
  formData.append('doc', target.files[0])

  fetch(import.meta.env.VITE_API_UPLOAD, {
    method: 'POST',
    body: formData,
  })
      .then(response => response.text())
      .catch(error => console.error('Error:', error))
      .then(function (docContent) {
        if (typeof docContent !== 'string') {
          alert("Failed to extract file content")
          return
        }

        const tokens = encode(docContent)

        if(tokens.length > 4096){
          alert("Exceeded maximum token limit of 4096")
          fileName.value = ''
          fileSize.value = 0
          formattedFileSize.value = '0B'
        }else{
          // Set the extracted content
          fileContent.value = docContent

          // Show file upload card
          fileUploadCard.value = true
        }
      })
}

function handleBackChat(){
  showTab.value = 'nav-tab-chat'
  tabWidth.value = ''
}

function handleBackDoc(){
  showTab.value = 'nav-tab-doc'
  tabWidth.value = 'width: 40%'
}

// Format file size in Bytes, KB, MB, GB
function formatFileSize() {
  if (fileSize.value < 1024) {
    formattedFileSize.value = fileSize.value + 'B';
  } else if (fileSize.value < (1024*1024)) {
    var temp = fileSize.value / 1024
    formattedFileSize.value = temp.toFixed(2) + 'KB'
  } else if (fileSize.value < (1024*1024*1024)) {
    var temp = fileSize.value / (1024*1024)
    formattedFileSize.value = temp.toFixed(2) + 'MB'
  } else {
    var temp = fileSize.value / (1024*1024*1024);
    formattedFileSize.value = temp.toFixed(2) + 'GB'
  }
}

// Submit message
function handleSubmit() {
  onConversation()
}

// Stream request to ChatGPT3.5
async function onConversation() {
  let message = prompt.value
  if(sessionId.value == null || sessionId.value == ''){
    sessionId.value = nanoid();
  }
  if (!message || message.trim() === '')
    return

  // Clear input box and disable button
  prompt.value = ''
  buttonDisabled.value = true
  fileUploadCard.value = false

  // Send message (for local display, not directly sent to GPT)
  messageList.value.push({
    send: {
      model: "gpt-3.5-turbo-1106",
      messages: [
        {
          role: "user",
          content: message,
          fileName: fileName.value,
          fileSize: fileSize.value,
        },
      ],
      temperature: 0.7,
    },
    loading: true,
  });

  scrollToBottom()

  // Stream request to ChatGPT3.5
  try {
    if(fileContent.value){
      message += ', Uploaded file content: ' + fileContent.value
    }

    let data = {
      "model": "gpt-3.5-turbo-1106",
      "messages": [{"role": "user", "content": message ,"sessionId": sessionId.value}],
      "temperature": 0.7,
      "stream": true
    }

    let headers = {
      'Content-Type': 'application/json',
      //'Authorization': 'Bearer ' + import.meta.env.VITE_APP_CHAT_API_KEY,
    }

    // Send request
    let response = await fetch(import.meta.env.VITE_APP_CHAT_URL, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(data)
    })

    // Reset file upload related states immediately after sending to ChatGPT
    fileName.value = ''
    fileSize.value = 0
    formattedFileSize.value = '0B'

    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    // Read the data returned from the stream
    const reader = response.body?.getReader();

    const textDecoder = new TextDecoder()
    let result = true
    while (reader && result) {
      // Get a chunk
      const { done, value } = await reader.read()

      if (done) {
        console.log('Stream ended')
        result = false

        // Restore button state
        buttonDisabled.value = false
        fileContent.value = ''

        // Save current messages
        window.localStorage.setItem(uuid, JSON.stringify(messageList.value))
        window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
        break
      }

      // Convert chunk string to array
      let chunkText = textDecoder.decode(value)
      chunkText = chunkText.replace(/data:/g, '')
      let results = chunkText.split('\n\n').filter(Boolean)

      // Iterate through the array and process multiple chunks
      for (let i = 0; i < results.length; i++) {
        var chunk = results[i]
        if (chunk.indexOf('DONE') == -1) {
          var chunkData = JSON.parse(chunk)
          if (chunkData.choices[0].delta.content) {
            if (!messageList.value[messageList.value.length - 1].receive) {
              // If it is the first result, set the state directly
              messageList.value[messageList.value.length - 1].receive = chunkData
              messageList.value[messageList.value.length - 1].loading = false
            } else {
              const lastMessage = messageList.value[messageList.value.length - 1]?.receive;
              if (lastMessage && lastMessage.choices[0].delta.content) {
                lastMessage.choices[0].delta.content += chunkData.choices[0].delta.content;
              }
            }
            scrollToBottom()
          }
        }
      }
    }
  } catch (e) {
    console.log(e)
  }
}

function handleDele(selectedUuid: string){
  // Reset the active state of the conversation list
  conversationList.value.forEach((item, index) => {
    if(item.uuid == selectedUuid){
      conversationList.value.splice(index,1)

      // Save the conversation to local storage
      window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
      return false
    }
  })

  // Reset the message records of the new conversation
  if(uuid == selectedUuid){
    let messages = window.localStorage.getItem(selectedUuid)
    if(messages){
      window.localStorage.removeItem(selectedUuid)
      messageList.value = []
    }
  }
}
</script>

<template>
  <div id="layout" class="theme-cyan">
    <!-- Sidebar -->
    <div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">
      <a href="#" title="ChatGPT-UI" class="brand">
        <svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-c0161dce=""><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-c0161dce=""></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-c0161dce=""></path></svg>
      </a>
      <div class="nav flex-md-column nav-pills flex-grow-1" role="tablist" aria-orientation="vertical">
        <a class="mb-xl-3 mb-md-2 nav-link active"  data-toggle="pill" href="#" role="tab">
          <i class="zmdi zmdi-comment-alt"></i> <!-- Chat -->
        </a>
        <a class="mb-xl-3 mb-md-2 nav-link  d-none d-sm-block flex-grow-1" data-toggle="pill" href="#" role="tab">
          <i class="zmdi zmdi-layers"></i> <!-- Layers -->
        </a>

        <a class="mt-xl-3 mt-md-2 nav-link light-dark-toggle" href="#">
          <i class="zmdi zmdi-brightness-2"></i> <!-- Light/Dark Mode -->
          <input class="light-dark-btn" type="checkbox">
        </a>
        <a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" href="#" role="tab">
          <i class="zmdi zmdi-settings"></i> <!-- Settings -->
        </a>
      </div>
      <button type="submit" class="btn sidebar-toggle-btn shadow-sm" @click="handleMenu">
        <i class="zmdi zmdi-menu"></i> <!-- Menu -->
      </button>
    </div>
    <!-- Sidebar -->
    <div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3" :style="tabWidth">
      <div class="tab-content">
        <!-- Chat Records -->
        <div class="tab-pane fade active show" id="nav-tab-chat" role="tabpanel" v-if="showTab === 'nav-tab-chat'">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0 text-primary">ChatGPT-UI</h3>
            <div>
              <button class="btn btn-dark" type="button"  @click="handleAdd">New Chat</button></div>
          </div>
          <ul class="chat-list">
            <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
              <span>最近的聊天记录</span>
            </li>
            <li v-for="(item, index) in conversationList" :class="[item.active ? 'active' : '']" @click="handleSwitch(item.uuid)">
              <div class="hover_action">
                <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
                <button type="button" class="btn btn-link text-danger" @click="handleDele(item.uuid)"><i class="zmdi zmdi-delete"></i></button>
              </div>
              <a href="#" class="card">
                <div class="card-body">
                  <div class="media">
                    <div class="avatar me-3">
                      <span class="status rounded-circle"></span>
                      <img class="avatar rounded-circle" :style="[item.active ? 'filter:grayscale(0)' : 'filter:grayscale(1)']" src="../../assets/chat/chatgpt.jpg" alt="avatar"></div>
                    <div class="media-body overflow-hidden">
                      <div class="d-flex align-items-center mb-1">
                        <h6 class="text-truncate mb-0 me-auto">{{ item.title }}</h6>
                        <p class="small text-muted text-nowrap ms-4 mb-0">{{ item.createDate }}</p></div>
                      <div class="text-truncate">{{ item.lastChatContent }}</div></div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <!-- end Chat Records -->
        <!-- PDF Preview -->
        <div class="tab-pane fade active show" id="nav-tab-doc" role="tabpanel" v-if="showTab === 'nav-tab-doc'">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0 text-primary">ChatGPT-PDF</h3>
            <div>
              <button class="btn btn-dark" type="button"  @click="handleBackChat">Back Chat</button></div>
          </div>
          <ul class="chat-list">
            <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
              <span>PREVIEW</span>
            </li>
            <li>
              <vue-pdf-app style="height: 100vh;" :config="config" :pdf="pdfFile"></vue-pdf-app>
            </li>
          </ul>
        </div>
        <!-- end PDF Preview -->
      </div>
    </div>

    <div class="main px-xl-5 px-lg-4 px-3">
      <div class="chat-body">
        <!-- Chat Box Header -->
        <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
          <div class="container-xxl">
            <div class="row align-items-center">
              <div class="col-6 col-xl-4">
                <div class="media">
                  <div class="me-3 show-user-detail">
                    <span class="status rounded-circle"></span>
                    <img class="avatar rounded-circle" src="../../assets/chat/chatgpt.jpg" alt="avatar"></div>
                  <div class="media-body overflow-hidden">
                    <div class="d-flex align-items-center mb-1">
                      <h6 class="text-truncate mb-0 me-auto">ChatGPT 3.5</h6></div>
                    <div class="text-truncate">Powered By Lucifer-Ai</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- end Chat Box Header -->

        <div class="chat-content" id="scrollRef" ref="scrollRef">
          <div class="container-xxl">
            <ul class="list-unstyled py-4" v-for="(item, index) of messageList">
              <!-- Right Message -->
              <li class="d-flex message right">
                <div class="message-body">
                  <span class="date-time text-muted"></span>
                  <div class="message-row d-flex align-items-center justify-content-end">
                    <div class="message-content border p-3">
                      {{ item.send.messages[0].content }}
                      <div class="attachment" v-show="item.send.messages[0].fileName" @click="handleBackDoc">
                        <div class="media mt-2">
                          <div class="avatar me-2">
                            <div class="avatar rounded no-image orange">
                              <i class="zmdi zmdi-collection-pdf"></i>
                            </div>
                          </div>
                          <div class="media-body overflow-hidden">
                            <h6 class="text-truncate mb-0">{{ item.send.messages[0].fileName }}</h6>
                            <span class="file-size">{{ item.send.messages[0].fileSize }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <!-- end Right Message -->
              <!-- Left Message -->
              <li class="d-flex message" v-if="item.receive">
                <div class="mr-lg-3 me-2">
                  <img class="avatar sm rounded-circle" src="../../assets/chat/chatgpt.jpg" alt="avatar"></div>
                <div class="message-body">
                  <span class="date-time text-muted">{{ item.receive.model }}</span>
                  <div class="message-row d-flex align-items-center">
                    <div class="message-content p-3">
                      <v-md-preview :text="item.receive.choices[0].message?item.receive.choices[0].message.content:item.receive.choices[0].delta.content"></v-md-preview>
                    </div>
                  </div>
                </div>
              </li>
              <!-- end Left Message -->
              <!-- Loading Message -->
              <li class="d-flex message" v-if="item.loading">
                <div class="mr-lg-3 me-2">
                  <img class="avatar sm rounded-circle" src="../../assets/chat/chatgpt.jpg" alt="avatar"></div>
                <div class="message-body">
                  <div class="message-row d-flex align-items-center">
                    <div class="message-content p-3">
                      <div class="wave">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <!-- end Loading Message -->
            </ul>
          </div>
        </div>
        <!-- Message Input Box -->
        <div class="chat-footer border-top py-xl-4 py-lg-2 py-2">
          <div class="container-xxl">
            <div class="row">
              <div class="col-12">
                <form @submit.prevent="handleSubmit">
                  <div class="input-group align-items-center">
                    <input type="text" v-model="prompt" class="form-control border-0 pl-0" placeholder="给lucifer-chat发送消息...">
                    <div class="attachment" v-show="fileUploadCard" @click="handleBackDoc">
                      <div class="media mt-2">
                        <div class="avatar me-2">
                          <div class="avatar rounded no-image orange">
                            <i class="zmdi zmdi-collection-pdf"></i>
                          </div>
                        </div>
                        <div class="media-body overflow-hidden">
                          <h6 class="text-truncate mb-0">{{ fileName }}</h6>
                          <span class="file-size">{{ fileSize }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="input-group-append">
                                    <span class="input-group-text border-0">
                                      <input type="file" accept="application/pdf" id="fileInput" ref="file" @change="handleUpload" style="display:none">
                                      <button class="btn btn-sm btn-link text-muted" data-toggle="tooltip" @click="($refs.file as HTMLInputElement).click()" title="" type="button" data-original-title="Attachment">
                                        <i class="zmdi zmdi-attachment font-22"></i>
                                      </button>
                                    </span>
                    </div>
                    <div class="input-group-append">
                                    <span class="input-group-text border-0 pr-0">
                                      <button type="submit" class="btn btn-primary" :disabled="buttonDisabled" @click="handleSubmit">
                                        <i class="zmdi zmdi-mail-send"></i>
                                      </button>
                                    </span>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- end Message Input Box -->
      </div>
    </div>
    <!-- Empty Page -->
    <div class="main px-xl-5 px-lg-4 px-3" style="display:none">
      <div class="chat-body">
        <div class="chat d-flex justify-content-center align-items-center h-100 text-center py-xl-4 py-md-3 py-2">
          <div class="container-xxl">
            <div class="avatar lg avatar-bg me-auto ms-auto mb-5">
              <img class="avatar lg rounded-circle border" src="../../assets/chat/user.png" alt="">
              <span class="a-bg-1"></span>
              <span class="a-bg-2"></span>
            </div>
            <h5 class="font-weight-bold">Hey, Robert!</h5>
            <p>Please select a chat to start messaging.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end Empty Page -->
  </div>
</template>
